﻿//var 0.0.2.0
//星形评分控件
//支持样式，非图片实现。只支持整星的选择
//依赖： LM_Base.js LM_Dom.js
/// <reference path="LM_Base.js" />
/// <reference path="LM_Dom.js" />
/// <reference path="LM_Control.js" />


Masque.C.StarRate = Class();
Masque.C.StarRate.extend({
    initialize: function(panel, lightStyle, darkStyle, options) {
        /*参数说明
        * (control&string panel,string lightStyle,string darkStyle) 
        * panel：受控的HTML容器。为string类型时则认为是对像的ID。
        * lightStyle：星星变亮时使用的样式。
        * darkStyle：星星变暗时使用的样式。
        * Options:
        *      NodeName：星控件的HTML NodeName
        *      StarNodes:可以指定星控件列表
        *      SendCallback：选中后的回调函数。
        *      ClickCallback：星星变亮时使用的样式。
        *      SelectIndex：初始选中的星星数
        *      Operate：操作性，请参考 Masque.C.Operate ，可以是整型。 0为不可操作，1为只能操作一次，2为不限制操作次数。
        *      StarCount:星星的总个数,值<1时，根据自动获取的个数。
        */
        if (arguments.length < 3) {
            alert("参数错误，星形控件生成失败。");
            return null;
        }

        this.Panel = $(panel);
        this.LightStyle = lightStyle;
        this.DarkStyle = darkStyle;
        this.__StarNodes = [];
        this.__Rated = false;
        var me = this;
        this.option = {
            SendCallback: null,
            NodeName: "",
            StarNodes: null,
            ClickCallback: null,
            Operate: Masque.C.Operate.Once,
            SelectIndex: -1,
            StarCount: 5,
            MouseHover: true
        };
        this.SetOption(options);
        this.__oSelectIndex = this.option.SelectIndex;

        if (this.option.StarNodes != null)
            this.__StarNodes = this.option.StarNodes;
        else {
            var nodes = Masque.D.getChildNodes(this.Panel);
            if (this.option.NodeName.length > 0) {
                this.option.NodeName = this.option.NodeName.toUpperCase();
                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i].nodeName == this.option.NodeName)
                        this.__StarNodes.push(nodes[i]);
                }
            }
            else {
                this.__StarNodes = nodes;
            }
        }

        this._StarCount = this.__StarNodes.length;
        if (this.option.StarCount > 0 && this._StarCount > this.option.StarCount) {
            this._StarCount = this.option.StarCount;
            this.__StarNodes.slice(0, this._StarCount);

        }
        if (this._StarCount < 1) {
            return null;
        }
        if (this.option.SelectIndex > -1) {
            this.Hover(this.option.SelectIndex);
        }
        if (this.option.Operate != Masque.C.Operate.False) {
            this.__bindEvent();
        }
        else {
            this.DisControl();
        }
    },
    Rate: function(index) {
        var me = this;
        if (!me.__Rated) {
            this.option.SelectIndex = index;
            if (Masque.V.isFunction(me.option.SendCallback)) {
                me.option.SendCallback(this.option.SelectIndex, this);
                me.DisControl(); //因为用AJAX异步传输，临时禁止控件使用。
            }
        }
    },
    SetControl: function() { //一个回复控件的接口，特殊情况下使用，一般可以用 option.Operate 结合 SendFinished（） 完成此操作。

        this.__bindEvent();
        this.__Rated = false;
        this.Panel.style.cursor = "pointer";
        for (var i = 0; i < this._StarCount; i++) {
            this.__StarNodes[i].style.cursor = "pointer";
        }
        this.Hover(this.option.SelectIndex);
    },
    SendFinished: function(result)  //回发完成后，应该调用此方法，因为可能要恢复控件的使用。
    {
        if (result == true) {
            if (this.option.Operate == Masque.C.Operate.Unbound) {
                this.__oSelectIndex = this.option.SelectIndex;
                this.SetControl();
            }
        } else {
            this.option.SelectIndex = this.__oSelectIndex;
            this.SetControl();

        }
    }
    ,
    DisControl: function() { //取消对星控件的控制
        var me = this;
        me.__clearEvent();
        me.__Rated = true;
        me.Panel.style.cursor = "default";
        for (var i = 0; i < me._StarCount; i++) {
            me.__StarNodes[i].style.cursor = "default";
        }
    },
    Hover: function(index) {// 鼠标停留事件
        var me = this;
        if (!me.__Rated) {
            for (var i = 0; i < me._StarCount; i++) {
                if (i <= index) {
                    me.__StarNodes[i].className = me.LightStyle;
                }
                else {
                    if (me.__StarNodes[i].className == me.DarkStyle)
                        break;
                    me.__StarNodes[i].className = me.DarkStyle;
                }
            }
        }
    },
    Out: function() {//离开事件,还原来选择的星数
        this.Hover(this.option.SelectIndex);
    },
    __bindEvent: function() { //绑定鼠标事件
        var me = this;
        addEvent(me.Panel, "mouseout", function() { me.Out(); });
        for (var j = 0; j < me._StarCount; j++) {
            if (this.option.MouseHover)
                eval('addEvent(me.__StarNodes[j],"mouseover",function(){  me.Hover(' + j + ')})');
            //addEvent(me.__StarNodes[j], "mouseout", Masque.D.CancelBubble);
            eval('addEvent(me.__StarNodes[j],"click",function(){ me.Rate(' + j + ')})');
        }
    },
    __clearEvent: function() { //取消鼠标事件绑定
        var me = this;
        removeEvent(me.Panel, "mouseout", function() { me.Out(); });
        for (var i = 0; i < me._StarCount; i++) {
            if (this.option.MouseHover)
                eval('removeEvent(me.__StarNodes[i],"mouseover",function(){ me.Hover(' + i + ')})');
            //removeEvent(me.__StarNodes[j], "mouseout", Masque.D.CancelBubble);
            eval('removeEvent(me.__StarNodes[i],"click",function(){ me.Rate(' + i + ')})');
        }
    },
    option: {
}
});
